<template>
  <textarea v-model.trim="jsonContent" type="text" @change="jsonChange" @blur="jsonChange" class="input_class" />
</template>
<script lang="ts" setup>
const jsonContent = ref('')
const hasJsonFlag = ref(true) // json是否验证通过
const emit = defineEmits(['update:jsonContent'])
const jsonChange = (value: any) => {
  if (jsonContent.value) {
    const datas = JSON.stringify(JSON.parse(jsonContent.value), null, 4)
    emit('update:jsonContent', datas)
    jsonContent.value = datas
  }
}
</script>
<style lang="scss" scoped>
.input_class {
  font-size: 10px;
  width: 70%;
  height: 80px;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  font-size: 16px;
  font-family: 'Courier New', Courier, monospace;
  resize: none;
}
.json-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
